/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {Button, ConfigProvider, Dialog, Form} from '@alifd/next';

import './index.scss';

const FormItem = Form.Item;

/**
 * @deprecated
 */
@ConfigProvider.config

class ExportDialog extends React.Component {
  static displayName = 'ExportDialog';

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      serverId: '',
      tenant: '',
      dataId: '',
      group: '',
      appName: '',
      configTags: '',
      records: [],
      total: 0,
    };
    this.formItemLayout = {
      labelCol: {fixedSpan: 4},
      wrapperCol: {span: 20},
    };
  }

  componentDidMount() {
  }

  openDialog(payload) {
    this.setState({
      visible: true,
      serverId: payload.serverId,
      tenant: payload.tenant,
      dataId: payload.dataId,
      group: payload.group,
      appName: payload.appName,
      configTags: payload.configTags,
      records: payload.records,
      total: payload.total,
    });
  }

  closeDialog = () =
> {
  this
.

  setState({
             visible: false,
           });
};

getQuery()
{
  const {locale = {}} = this.props;
  if (this.state.records.length > 0) return locale.selectedEntry;
  if (
    this.state.dataId === '' &&
    this.state.group === '' &&
    this.state.appName === '' &&
    this.state.configTags.length === 0
  ) {
    return '';
  }
  let query = ' |';
  if (this.state.dataId !== '') {
    query += ` DataId: ${this.state.dataId},`;
  }
  if (this.state.group !== '') {
    query += ` Group: ${this.state.group},`;
  }
  if (this.state.appName !== '') {
    query += `${locale.application + this.state.appName},`;
  }
  if (this.state.configTags.length !== 0) {
    query += `${locale.tags + this.state.configTags},`;
  }
  return query.substr(0, query.length - 1);
}

doExport = () =
>
{
  // document.getElementById('downloadLink').click();
  const url = this.getLink();
  window.open(url);
  this.closeDialog();
}
;

getLink()
{
  const data = [];
  this.state.records.forEach(record = > {
    data.push({dataId: record.dataId, group: record.group});
})
  ;
  const query = `?dataId=${this.state.dataId}&group=${this.state.group}&appName=${
    this.state.appName
    }&tags=${this.state.configTags || ''}&data=${encodeURI(JSON.stringify(data))}`;
  const baseLink = `/diamond-ops/batch/export/serverId/${this.state.serverId}/tenant/${
    this.state.tenant.id
    }${query}`;
  if (window.globalConfig.isParentEdas()) {
    return `/authgw/${window.edasprefix}${baseLink}`;
  }
  return baseLink;
}

render()
{
  const {locale = {}} = this.props;
  const footer = (
    < div >
    {/* <a id="downloadLink" style={{ display: "none" }} href={this.getLink()} /> */}
    < Button
  type = "primary"
  onClick = {this.doExport}
  {...
    {
      disabled: this.state.total <= 0
    }
  }
>
  {
    locale.exportBtn
  }
<
  /Button>
  < /div>
)
  ;

  return (
    < div >
    < Dialog
  visible = {this.state.visible}
  footer = {footer}
  footerAlign = "center"
  style = {
  {
    width: 480
  }
}
  onCancel = {this.closeDialog}
  onClose = {this.closeDialog}
  title = {`${locale.exportConfiguration + this.state.serverId}）`
}
>
<
  Form >
  < FormItem
  label = {locale.source}
  {...
    this.formItemLayout
  }
>
<
  p >
  < span
  style = {
  {
    color: '#33cde5'
  }
}>
  {
    this.state.tenant.name
  }
<
  /span>
  {
    ` | ${this.state.tenant.id}`
  }
<
  /p>
  < /FormItem>
  < FormItem
  label = {locale.items}
  {...
    this.formItemLayout
  }
>
<
  p >
  < span
  style = {
  {
    color: '#33cde5'
  }
}>
  {
    this.state.total
  }
<
  /span> {this.getQuery()}{' '}
  < /p>
  < /FormItem>
  < /Form>
  < /Dialog>
  < /div>
)
  ;
}
}

export default ExportDialog;
